import React, { useState } from 'react'
import { Layout, Button, Popconfirm, message } from 'antd'
import moment from 'moment'
import { logout } from '../../utils/auth/AuthUtils'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'



// 页头
const { Header } = Layout

// 页头功能按钮
export default function FillHeader () {

  // 内部状态控制按钮的加载状态
  const [loading, setLoading] = useState(false)

  //setInterval(function () { alert("Hello") }, 3000)



  // 下载当前页面的excel
  const downloadExcel = async () => {

    // 使按钮变成加载状态，防止重复请求
    setLoading(true)
    await axios({
      url: "http://localhost:8081/system/lineLossFill/downloadExcel",
      method: "post",
      data: {
        excelOption: JSON.stringify(window.luckysheet.getAllSheets())
      },
      headers: {
        'satoken': localStorage.getItem("satoken")
      },
      responseType: 'blob'
    }
    ).then(r => {
      // 关闭加载状态
      setLoading(false)
      if (r.status === 200) {
        //console.log(r.headers)
        const fileName = moment().format('YYYY-MM') + "月" + decodeURI(r.headers['filename'])
        const blob = new Blob([r.data], { type: r.headers['content-type'] })
        //创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
        const eLink = document.createElement('a')
        eLink.download = fileName
        eLink.style.display = 'none'
        eLink.href = URL.createObjectURL(blob)
        document.body.appendChild(eLink)
        eLink.click()
        URL.revokeObjectURL(eLink.href) // 释放URL 对象
        document.body.removeChild(eLink)
      } else {
        return message.err("下载失败")
      }
    })
  }

  //保存数据
  const saveData = async () => {

    // 使按钮变成加载状态，防止重复请求
    //setLoading(true)
    await axios({
      url: "http://localhost:8081/onlineOffice/saveData",
      method: "post",
      data: {
        excelOption: JSON.stringify(window.luckysheet.getAllSheets())
      },
      headers: {
        'satoken': localStorage.getItem("satoken")
      },
      //responseType: 'blob'
    }
    ).then(r => {
      // 关闭加载状态
      //setLoading(false)
      if (r.data.code === 200) {
        message.success(r.data.msg)
      } else {
        message.err(r.data.msg)
      }
    })
  }

  // 编程式跳转
  const navigate = useNavigate()




  return (
    <>
      <Header
        className='temp-header'
        style={{ width: '100%' }}
      >
        <span
          className='tempHeaderTitle'
        >多人协同</span>

        <Popconfirm
          title="确认注销?"
          onConfirm={() => {
            logout()
            navigate('/login')
          }}
          onCancel={() => { }}
          okText="退出"
          cancelText="取消"
        >
          <Button
            danger
            className='tempHeaderBtn'
            ghost
          >注销 </Button>
        </Popconfirm>

        <Button
          className='tempHeaderBtn'
          type="primary"
          ghost
          loading={loading}
          onClick={() => { downloadExcel() }}>下载</Button>

        <Button
          className='tempHeaderBtn'
          type="primary"
          ghost
          loading={loading}
          onClick={() => { saveData() }}>保存</Button>
      </Header>
    </>
  )
}

